Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
autoprefixer
Advanced tools
Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website
The autoprefixer npm package is a PostCSS plugin that parses your CSS and adds vendor prefixes to CSS rules using values from Can I Use. It is a tool that automates the process of adding vendor prefixes to CSS rules to ensure cross-browser compatibility.
Adding vendor prefixes
This feature automatically adds necessary vendor prefixes to CSS rules. The code sample shows how to use autoprefixer with PostCSS to process a CSS string that includes the 'display: flex;' rule, which then outputs the rule with the appropriate vendor prefixes.
const autoprefixer = require('autoprefixer');
const postcss = require('postcss');
postcss([ autoprefixer ]).process('a { display: flex; }').then(result => {
console.log(result.css);
// Output: 'a { display: -webkit-box; display: -ms-flexbox; display: flex; }'
});
Customizing browser support
Autoprefixer allows customization of the browsers you want to target. The code sample demonstrates how to specify the browsers using the 'overrideBrowserslist' option to target the last 2 versions of all browsers.
const autoprefixer = require('autoprefixer');
const postcss = require('postcss');
postcss([ autoprefixer({ overrideBrowserslist: ['last 2 versions'] }) ])
.process('a { display: flex; }').then(result => {
console.log(result.css);
// Output will include prefixes for the last 2 versions of all browsers.
});
Removing unnecessary prefixes
Autoprefixer can also remove outdated prefixes if they are no longer needed for the specified browser range. The code sample shows how to disable this feature using the 'remove' option.
const autoprefixer = require('autoprefixer');
const postcss = require('postcss');
postcss([ autoprefixer({ remove: false }) ])
.process('a { -webkit-box-shadow: 0 0 10px black; box-shadow: 0 0 10px black; }').then(result => {
console.log(result.css);
// Output will keep the -webkit-box-shadow prefix even if it's not necessary for the specified browsers.
});
postcss-preset-env is a plugin that allows you to use future CSS features today. It includes autoprefixer functionality and extends it by allowing you to use future CSS syntax that is not yet fully supported in browsers.
cssnano is a modular CSS minifier that includes autoprefixing as one of its optimizations. While autoprefixer focuses solely on adding prefixes, cssnano aims to reduce the size of CSS files by performing a variety of optimizations, including autoprefixing.
pleeease is a CSS processor that combines several tools, including autoprefixer, to streamline the process of writing CSS. It simplifies the workflow by integrating autoprefixing, minification, and other features into one package.
Parse CSS and add vendor prefixes to CSS rules using values from Can I Use.
Write your CSS rules without vendor prefixes (in fact, forget about them entirely):
:fullscreen a {
transition: transform 1s
}
Process your CSS by Autoprefixer:
var prefixed = autoprefixer.process(css).css;
It will use the data on current browser popularity and properties support to apply prefixes for you:
:-webkit-full-screen a {
-webkit-transition: -webkit-transform 1s;
transition: transform 1s
}
:-moz-full-screen a {
transition: transform 1s
}
:-ms-fullscreen a {
transition: transform 1s
}
:fullscreen a {
-webkit-transition: -webkit-transform 1s;
transition: transform 1s
}
You can play with your CSS in the interactive demo of Autoprefixer.
Twitter account for news and releases: @autoprefixer.
Sponsored by Evil Martians. Based on PostCSS framework.
The best tool is a tool you can't see and one that does the work for you. This is the main idea behind Autoprefixer.
Autoprefixer interface is simple: just forget about vendor prefixes and write normal CSS according to the latest W3C specs. You don’t need a special language (like Sass) or special mixins.
Because Autoprefixer is a postprocessor for CSS, you can also use it with preprocessors, such as Sass, Stylus or LESS.
Autoprefixer uses the most recent data from Can I Use, understands which browsers are actual and popular and adds only the necessary vendor prefixes.
It also cleans your CSS from old prefixes (like prefixed border-radius
,
produced by many CSS libraries):
a {
-webkit-border-radius: 5px;
border-radius: 5px
}
compiles to:
a {
border-radius: 5px
}
Note, that Autoprefixer doesn’t load Can I Use data every time. It takes it from
caniuse-db dependency.
So, if you use Autoprefixer from npm
, try to keep your autoprefixer
and caniuse-db
packages fresh to have only actual prefixes in your CSS.
Flexbox or gradients have different syntaxes in different browsers (sometimes you need to recalculate angles, sometimes you need 2 old properties instead of new one), but Autoprefixer hides this from you.
Just code by latest W3C specs and Autoprefixer will produce the code for old browsers:
a {
display: flex;
}
compiles to:
a {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex
}
Autoprefixer has 22 special hacks to fix browser’s differences.
You can specify the browsers you want to target in your project:
autoprefixer("last 1 version", "> 1%", "Explorer 7").process(css).css;
last 2 versions
is last versions for each browser. Like “last 2 versions”
strategy in
Google.last 2 Chrome versions
is last versions of the specified browser.> 5%
is browser versions, selected by global usage statistics.Firefox > 20
is Firefox versions newer than 20.Firefox >= 20
is Firefox version 20 or newer.Firefox ESR
is the latest Firefox ESR version.none
don’t set any browsers to clean CSS from any vendor prefixes.ios 7
to set browser version directly.Blackberry and stock Android browsers will not be used in last n versions
.
You can add them by name:
autoprefixer("last 1 version", "BlackBerry 10", "Android 4").process(css).css;
Browsers names (case insensitive):
Android
for old Android stock browser.BlackBerry
or bb
for Blackberry browser.Chrome
for Google Chrome.Firefox
or ff
for Mozilla Firefox.Explorer
or ie
for Internet Explorer.iOS
or ios_saf
for iOS Safari.Opera
for Opera.Safari
for desktop Safari.OperaMobile
or op_mob
for Opera Mobile.OperaMini
or op_mini
for Opera Mini.ChromeAndroid
or and_chr
for Chrome for Android
(mostly same as common Chrome
).FirefoxAndroid
or and_ff
for Firefox for Android.ExplorerMobile
or ie_mob
for Internet Explorer Mobile.By default, Autoprefixer uses > 1%, last 2 versions, Firefox ESR, Opera 12.1
:
You must set input and output CSS files paths (by from
and to
options)
to generate a correct map.
Autoprefixer can modify previous source maps (for example, from Sass):
it will autodetect a previous map if it is listed in an annotation comment or
in a file near the input CSS. You can disable source map with map: false
or
set the previous source map content manually to map.prev
option (as a string
or a object).
var result = autoprefixer.process(css, {
map: { prev: fs.readFileSync('main.sass.css.map') },
from: 'main.sass.css',
to: 'main.min.css'
});
result.css //=> CSS with source map annotation comment
result.map //=> Source map from main.sass to main.min.css
fs.writeFileSync('main.min.css.map', result.map);
Autoprefixer supports inline source maps too. If input CSS contains annotation
from the previous step with map in data:uri
, Autoprefixer will update the
source map with prefixes changes and inine the new map back into the output CSS.
You can read more about source map options in PostCSS documentation.
Autoprefixer changes CSS indentation to create a nice visual cascade of prefixes, if CSS is uncompressed:
a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
You can disable cascade by cascade: false
option.
PostCSS has special safe mode to parse broken CSS. If you will set safe: true
option to process
method, it will try to fix any syntax error, that it founds
in CSS. For example, it will parse a {
as a {}
.
autoprefixer.process('a {'); // will throw "Unclosed block"
autoprefixer.process('a {', { safe: true }); // process CSS as a {}
It is useful for legacy code with a lot of hack. Other use case is a interactive tools with live input, like Autoprefixer demo.
Autoprefixer was designed to have no interface. It is just work. If you need some browser specific hack just write prefixed property after unprefixed.
a {
transform: scale(0.5);
-moz-transform: scale(0.6)
}
If some prefixes was generated in wrong way, please create issue on GitHub.
But if you didn’t need Autoprefixer in some part of your CSS and you understand why it is a best solution, you can use control comments to disable Autoprefixer.
a {
transition: 1s; /* it will be prefixed */
}
b {
/* autoprefixer: off */
transition: 1s; /* it will not be prefixed */
}
Control comment disable Autoprefixer in rule, where you place it.
So Autoprefixer will not works in entiry b
rule, not only after comment.
Also you can use comment recursively:
/* autoprefixer: off */
@support (transition: all) {
/* autoprefixer: on */
a {
/* autoprefixer: off */
}
}
You can check which browsers are selected and which properties will be prefixed:
info = autoprefixer("last 1 version").info();
console.log(info);
Or by CLI command:
autoprefixer -i
No. Autoprefixer only adds prefixes, not polyfills. There are two reasons:
Check that you use correct direction syntax. For example, you should use
to bottom
instead of top
:
a {
background: linear-gradient(to bottom, white, black)
}
Unfortunately, unprefixed gradients use a different direction syntax and most examples you find use an old gradient syntax, so be careful and use always the latest W3C specs with Autoprefixer.
border-radius
?Developers are often surprised by how few prefixes are required today. If Autoprefixer doesn’t add prefixes to your CSS, check if they’re still required on Can I Use.
If a prefix is required, but Autoprefixer doesn’t add it or adds it incorrectly, please report an issue and include your source CSS and expected output.
appearance
?Unlike transition
, the appearance
property is not a part of
any specification. So there is no appearance
, only -moz-appearance
and -webkit-appearance
. Quote from MDN:
Do not use this property on Web sites: not only is it non-standard, but its behavior changes from one browser to another. Even the keyword
none
does not have the same behavior on each form element across different browsers, and some do not support it at all.
JavaScript is very popular, but this is the same reason why its syntax does not evolve. There is an entire Internet with a lot of legacy code which should be supported by browsers. If developers add an inappropriate feature then it can’t be removed in then next versions but must be supported for a very long time. This is very bad for innovation. To create new, we need to experiment and to choose.
As a result JavaScript doesn’t have even basic syntax features, which are present in other languages like Ruby or Python. There are no string interpolation, short lambda syntax, foreach statement for arrays, string and arrays slicing, etc. This features are really important and they will be in ECMAScript 6 (first update of JS syntax after 15 years), but this new specification is still not released and, of course, we must wait until all browsers support it.
With JavaScript preprocessors like CoffeeScript or TypeScript we can bring innovation back. We can add a new operator and use it right now, without waiting for support in all browsers.
Autoprefixer was written in pure JavaScript before. But CoffeeScript made Autoprefixer code much cleaner and more readable. Often, 2 lines of code became 1.
Don’t be afraid of CoffeeScript. It is just a new syntax, not another language (like ClojureScript). You can open examples on CoffeeScript.org and start to code. After a week your eyes will adjust and you will see that CoffeeScript is cleaner and more readable.
Situation with CoffeeScript and JavaScript is absolutely the same as with CSS preprocessors and postprocessors. How can we develop a CSS postprocessor and avoid using a JS preproccesor :).
You can use the grunt-autoprefixer plugin for Grunt. Install the npm package and add it to Gruntfile:
grunt.loadNpmTasks('grunt-autoprefixer');
You can use gulp-autoprefixer to use Autoprefixer in your Gulp build configuration.
var prefix = require('gulp-autoprefixer');
gulp.src('./css/*.css')
.pipe(prefix(["last 1 version", "> 1%", "ie 8", "ie 7"], { cascade: true }))
.pipe(gulp.dest('./dist/'));
You can use the autoprefixer-brunch plugin for Brunch.
If you use Compass binary to compile your styles, you can easily integrate
Autoprefixer with it. Install autoprefixer-rails
gem:
gem install autoprefixer-rails
and add post-compile hook to config.rb
:
require 'autoprefixer-rails'
on_stylesheet_saved do |file|
css = File.read(file)
File.open(file, 'w') do |io|
io << AutoprefixerRails.process(css)
end
end
You can set the browsers option as the second argument in process
method:
io << AutoprefixerRails.process(css, browsers: ["last 1 version", "> 1%"])
If you use Stylus CLI, you can add Autoprefixer by autoprefixer-stylus plugin.
Just install npm package and use it in -u
option:
stylus -u autoprefixer-stylus -w file.styl
Add autoprefixer-rails gem
to Gemfile
and write CSS in a usual way:
gem "autoprefixer-rails"
You can integrate Autoprefixer into your Sprockets environment
by autoprefixer-rails
gem:
AutoprefixerRails.install(sprockets_env)
or process CSS from plain Ruby:
prefixed = AutoprefixerRails.process(css)
CodeKit, since the 2.0 version, contains Autoprefixer. In the After Compiling section, there is a checkbox to enable Autoprefixer. Read CodeKit docs for more inforamtion.
If you want to build your assets with a GUI, try Prepros. Just set “Auto Prefix CSS” checkbox in right panel.
You can use the broccoli-autoprefixer plugin for Broccoli.
To use Autoprefixer in Mincer,
install autoprefixer
npm package and enable it:
environment.enable('autoprefixer');
Add middleman-autoprefixer
gem to Gemfile
:
gem "middleman-autoprefixer"
and activate the extension in your project’s config.rb
:
activate :autoprefixer
Use autoprefixer
npm package:
var autoprefixer = require('autoprefixer');
var css = 'a { transition: transform 1s }';
var prefixed = autoprefixer.process(css).css;
You can use Autoprefixer in PHP by autoprefixer-php library:
$autoprefixer = new Autoprefixer();
$css = 'a { transition: transform 1s }';
$prefixed = $autoprefixer->compile($css);
You can apply the Autoprefixer optimizations to your LESS/Sass stylesheets in the Visual Studio 2013 by using the Web Essentials 2013 plugin (since the 2.2 version).
To add this functionality in the Visual Studio 2013 you need to do the following steps:
Tools
→ Options
→ Web Essentials
→ CSS
menu itemEnable Autoprefixer
box specify a value equal to True
Targeted browsers
boxYou can use Autoprefixer in .NET by the Autoprefixer for .NET library. Install package via NuGet:
PM> Install-Package Autoprefixer
You can use Autoprefixer in ASP.NET by the official BundleTransformer.Autoprefixer plugin for Bundle Transformer.
To add this functionality in the ASP.NET web application you need to do the following steps:
Install package via NuGet:
PM> Install-Package BundleTransformer.Autoprefixer
Perform a post-install actions specified in the readme.txt
file
Register a bundles in the App_Start/BundleConfig.cs
file and configure the
Bundle Transformer (see the documentation)
Additionally, you can specify the browser conditional expressions in the
Web.config
file (in the Visual Studio supported IntelliSense):
You can use Autoprefixer in the browser or as a non-Node.js runtime with standalone version.
Autoprefixer can be also used as a PostCSS processor, so you can combine it with other processors and parse CSS only once:
postcss().
use( autoprefixer(['> 1%', 'opera 12.5']).postcss ).
use( compressor ).
process(css);
You can process your styles directly in Sublime Text with the sublime-autoprefixer plugin.
Styles can processed automatically in Brackets using the brackets-autoprefixer extension.
You can process your styles directly in Atom with the atom-autoprefixer package.
You can use the autoprefixer
binary to process CSS files using
any assets manager:
sudo npm install --global autoprefixer
autoprefixer *.css
See autoprefixer -h
for help.
FAQs
Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website
The npm package autoprefixer receives a total of 16,710,094 weekly downloads. As such, autoprefixer popularity was classified as popular.
We found that autoprefixer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.